<template>

  <!--<el-card class="box-card">-->
  <!--&lt;!&ndash;{{item.ItemsRight}}&ndash;&gt;-->
  <!--&lt;!&ndash;{{card}}&ndash;&gt;-->
  <!--&lt;!&ndash;<div slot="header" class="clearfix">&ndash;&gt;-->
  <!--<div class="title">-->
  <!--<span style="line-height: 24px;">{{card.title}}</span>-->
  <!--&lt;!&ndash;<el-button style="float: right;" type="primary">{{card.btn_name}}</el-button>&ndash;&gt;-->
  <!--<a href="javaScript:"><span style="float: right"><i class="el-icon-check"></i>{{card.btn_name}}</span></a>-->
  <!--&lt;!&ndash;</div>&ndash;&gt;-->
  <!--</div>-->
  <!--<div class="text item" v-for="(item ,index) in card.list_item" :key="index">-->
  <!--<a :href="item.link"> {{item.name}}</a>-->
  <!--</div>-->
  <!--</el-card>-->

  <div class="container">
    <div class="title">
      <span style="line-height: 24px;"><b>{{card.title}}</b></span>
      <a href="javaScript:"><span style="float: right"><i class="el-icon-check"></i>{{card.btn_name}}</span></a>
    </div>
    <ul>
      <li v-for="(item ,index) in card.list_item">
        <a :href="item.link"> {{item.name}}</a>
      </li>
    </ul>
  </div>


</template>
<script>
  export default {
    props: ['card'],
    data () {
      return {
//        card: {
//          title: '李四',
//          btn_name: '换一换',
//          list_item: [
//            {
//              name: '项目1',
//              link: 'http://www.baidu.com'
//            },
//            {
//              name: '项目2',
//              link: 'http://www.baidu.com'
//            }
//          ]
//        }
      }
    }
  }

</script>
<style scoped>
  a {
    color: black;
  }

  a:hover {
    color: #ff895e;
  }

  .title {

    border-bottom: 1px solid rgba(0, 0, 0, 0.32);
  }

  .container {
    font-size: 0.8em;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.2);
  }

  ul li {
    list-style: none;
    font-size: 0.6em;
    margin: 5px 0;
  }

  ul {
    padding-left: 0px;

  }
</style>
